@import './theme/theme-default.scss';
@import './transition.scss';
@import './formPage.scss';
@import './variables.scss';
@import './card.scss';
@import './theme/text-color.scss';

body {
  height: 100%;
  margin: 0px;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background-color: #f2f2f2;
}
// 菜单css
#app {
  a:link{
    text-decoration:none;
  }
  height: 100%;
  .banner {
    height: $bannerHeight;
    background-color: $menuBg;
    display: flex;
    align-items: center;
  }

  .side-container-collapsed {
    width:54px !important;
  }
  .side-container {
    transition: width 0.28s;
    width:$sideBarWidth;
    margin-top: $bannerHeight;
    height: calc(100vh - #{$bannerHeight});
    background-color:$menuBg ;
    position: fixed;
    left:0;
    top:0;
    overflow: hidden;

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    .el-scrollbar {
      height: calc(100vh - #{$bannerHeight});
    }

    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: $menuHover !important;
      }
    }

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      background-color: $menuSubItem !important;

      &:hover {
        background-color: $menuSubItemActive !important;
      }
    }

    /**
    * 该样式为在隐藏菜单时候，同时隐藏菜单中的文字
    * element中如果循环递归生成菜单，则递归时被递归的菜单文件如果用div包住
    * 则会在隐藏菜单时无法隐藏菜单中的文字，需要添加下一段的css隐藏文字
    * 如果不是用div包住递归的菜单，则不需要额外的css控制文字，但是会出现一个循环递归
    * 超出浏览器内存的报错。这个报错会在隐藏菜单后，鼠标移到拥有多级菜单的项上产生。
    */
    & .el-menu--collapse > div > .el-submenu > .el-submenu__title span {
      height: 0;
      width: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;
    }
    & .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
      display: none;
    }


  }
  .hideSidebar {
    transition: 0.28s;
    margin-left: 54px !important;
  }

  .main-container {
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    overflow: hidden;

    & .app-main {
      padding: #{$mainPaddingTop} 12px 7px 20px;
      height: calc(100vh - #{$headerHeight} - #{$bannerHeight} - (#{$mainPaddingTop} * 2) + 8px); //95px is header's height, 30px is app-main's padding
      width: calc(100% - 32px);
      position: relative;
      overflow: scroll;
      background-color: #f2f2f2;
      margin-top: calc(#{$headerHeight});
      & .app-inner {
        min-width: 1000px;
      }
    }

    .app-header{
      position: fixed;
      top: 0;
      right: 0;
      width: calc(100% - #{$sideBarWidth});
      overflow: hidden;
      margin-top: $bannerHeight;
      background-color: #ffffff;
      border-bottom: 1px solid #d8dce5;
      z-index: 9;
    }

    .headerHideSidebar{
      transition: 0.28s;
      width: calc(100% - 54px) !important
    }
  }
}

// el-select-tree长度css重写，撑满整个form-item
.el-select-tree{
  width: 100%;
}

.el-select{
  width: 100%;
}

// element滚动条样式
.scrollbar-wrapper {
  overflow-x: hidden !important;
}

// 解决el-table固定列高度计算错误
.el-table__fixed-right{
  height: 100% !important;
}

// 解决tinymce 弹窗被覆盖
.tox-tinymce-aux{
  z-index: 3000 !important;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 9px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

// 预览图像大小
.normal-img-size {
  cursor: pointer;
  height: 148px;
  width: 148px;
  border-radius: 6px;
  padding: 3px;
}

// 具体图像框大小
.normal-dialog-img-size {
  max-width: 48vw;
  border-radius: 6px;
}

// 字体颜色
.text-light-gray {
  color: $lightGray;
}

.text-gray {
  color: $gray;
}

.text-black {
  color: $black;
}

.popButton {
  margin-left: 10px;
}
